<template>
	<view v-if="this.selectedItem" style="max-width:1400px;display: flex;
		padding-top:50px;padding-bottom:50px" :style="containerStyle" @touchstart="touchStart" @touchend="touchEnd" >
		<view style="width: 100%;background-color: white;height: 100%;padding:10px;border-radius: 10px;">
			
			<view style="width:100%">
				<u-row>
					<u-col span="2">
						<view style="padding: 9px 20px 9px 20px;font-size: 16px;width:100px;
							font-weight: 600;cursor: pointer;" class="color-blue" v-show="needBack" @click="backHandle"> &lt; 返回 </view>
					</u-col>
				
					<u-col v-if="!isExamStatus" span="10">
						<view>
							<u-row>
								<u-col :span="12/typeList.length" v-for="(item, index) in typeList" :key="index">
									<view style="text-align: center;padding-top:10px;padding-bottom:10px;"
										@click="changeType(item,index)">
										<text :class="selectTypeIndex == index ? 'underline' : 'color-gray'">{{item.name}}</text>
									</view>
								</u-col>
							</u-row>
						</view>
					</u-col>
					
					<u-col v-if="isExamStatus" span="8">
						<view style="text-align: center;padding: 9px 0 9px 0;">
							{{courseName}}
						</view>
					</u-col>
					
					<u-col v-if="isExamStatus && !isHistoryStatus" span="2">
						<view  style="display: flex;align-items: center;
							margin: 0 0 7px 0;justify-content: center;" >
							<image 
								src="../../static/image/clock.png" style="margin-left:15px;margin-right: 7px; width:21px;height:21px;"></image>
							<u-count-down
									:time="examTimeSecond * 1000"
									format="HH:mm:ss"
									autoStart
									millisecond
									@change="onTimeChange"
									@finish="onTimeFinish"
								>
								<view class="color-blue font-x font-b">
									<text>{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}:</text>
									<text >{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}:</text>
									<text >{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}</text>
								</view>
							</u-count-down>
						</view>
					</u-col>
				</u-row>
			</view>
			
			<u-line width="100%" color="#E2E3E7"></u-line>
			<view :animation="animationData" style="height: calc(100% - 100px);overflow-y: scroll">
				<view style="padding-left:10px;padding-right: 10px;" >
					<view style="padding-top: 15px;padding-bottom: 15px;">
						<u-row>
							<u-col span="4">
								<text
									class="color-blue">[{{ selectedItem.caseFlag == 0 ? selectedItem.typeName : '案例题'}}]</text>
							</u-col>
							<u-col span="4" text-align="center">
								<text class="color-blue font-normal">{{ practiceMode }} </text>
							</u-col>
							<u-col span="4" text-align="right">
								<text><text
										class="color-blue">{{ selectedIndex + 1 }}</text>/{{ currentQuestionList.length }}</text>
							</u-col>
						</u-row>
					</view>
					<template v-if="selectedItem.caseFlag == 1">
						<view style="font-size: 16px;"><rich-text
								v-html="formatTitle(selectedIndex + 1, selectedItem.caseMaterials, '[背景材料]')"></rich-text>
						</view>
						<u-line style="width: 100%;" color="#366DE8" dashed="true" margin="13px 0 13px 0"></u-line>
						
						<view style="margin-bottom: 10px;font-size: 16px;" class="color-black"><u-parse
								:content="formatTitle('', selectedItem.content, '[' + selectedItem.typeName + ']')"></u-parse></view>
					</template>
					<view v-if="selectedItem.caseFlag == 0" style="margin-bottom: 10px;font-size: 16px;" class="color-black"><u-parse
							:content="formatTitle(selectedIndex + 1, selectedItem.content)"></u-parse></view>
					<view v-for="(option, optionIndex) in selectedItem.optionList" :key="option.option"
						style="margin-bottom: 10px;">
						<view class="option-item"  @click="changeAnswer(selectedItem, optionIndex)">
							<view style="display:flex;align-items: center; padding-top:10px;padding-bottom:10px;">
								<view :class="calcOptionClass(selectedItem, optionIndex)"
									style="min-width:36px;">
									<text>{{ option.option }}</text>
								</view>
								<view style="margin-left:15px;font-size: 15px;">
									<u-parse :content="option.content"></u-parse>
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view style="padding:10px;width: 200px;" v-if="!isHistoryStatus && practiceMode != '背题模式' && !isExamStatus">
					<u-button type="primary" color="#366DE8" shape="circle" text="查看答案" @click="showAnswer"></u-button>
				</view>
				
				<view v-if="isShowAnswer || isHistoryStatus || practiceMode == '背题模式'" style="background-color: #F6F7FB;padding:15px;">
					<view style="background-color: white;padding:15px;border-radius: 6px;" v-if="selectedItem.typeCode != 'fillBlank' && selectedItem.typeCode != 'shortAnswer'">
						<view style="padding-bottom:15px;" class="font-b color-black">
							{{selectedItem.answer == selectedItem.studentAnswer ? '回答正确' : '回答错误'}}
						</view>
						<view style="padding:15px;background-color: #F6F7FB;border-radius: 6px;">
							<u-row style="color:#999999;">
								<u-col span="6">
									<view style="text-align: center;">正确答案</view>
									<view style="color:#38D481;margin-top:5px;font-weight: 600px;text-align: center;font-size: 24px;height: 30px;">
										{{selectedItem.answer}}
									</view>
								</u-col>
								<u-line direction="col" color="#999999" length="50"></u-line>
								<u-col span="6">
									<view style="text-align: center;">我的答案</view>
									<view
										:class="selectedItem.answer == selectedItem.studentAnswer ? 'color-green' : 'color-red'"
										style="margin-top:5px;font-weight: 600px;text-align: center;font-size: 24px;height: 30px">
										<view :style="selectedItem.studentAnswer ? 'font-size: 24px;' : 'font-size:18px'">
											{{selectedItem.studentAnswer ? selectedItem.studentAnswer : '未作答'}}
										</view>
									</view>
								</u-col>
							</u-row>
						</view>
					</view>
          
          <!--        填空和简答-->
          <view v-else style="background-color: white;padding:15px;border-radius: 6px;">
            <view style="padding-bottom:15px;" class="font-b color-black">正确答案</view>
            <view style="padding:15px;background-color: #F6F7FB;border-radius: 6px;color:#38D481;margin-top:5px;font-weight: 600;text-align: left;">
              <u-parse :content="selectedItem.answer" previewImg></u-parse>
            </view>
          </view>
          <!-- 试题解析 -->
          <view v-if="selectedItem.analysisContent" style="background-color: #F6F7FB;padding:15px 0;">
            <view style="background-color: white;border-radius: 6px;">
              <view style="background-color: white;padding:15px;border-radius: 6px;">
                <view style="padding-bottom:15px;" class="font-b color-black">
                  试题解析
                </view>
                <view style="padding:15px;background-color: #F6F7FB;border-radius: 6px;">
                  <u-parse :content="selectedItem.analysisContent" previewImg></u-parse>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
			
			<view
				:style="questionBottomStyle"
				style="position: fixed;bottom:50px;background-color: white; border-radius:0 0 10px 10px;margin-left:-10px;
					border-top: 1px solid #E2E3E7;padding-bottom: 15px;padding-top:15px">
				<view>
					<u-row>
						<u-col span="1" text-align="center" class="option-item" >
						</u-col>
						<u-col span="4" text-align="center" class="option-item" >
							<view>
								<u-button type="primary" :plain="true" color="#366DE8" shape="circle" text="上一题" @click="preQuestion"></u-button>
							</view>
						</u-col>
						<u-col span="2" text-align="center" class="option-item" >
						</u-col>
						
						<u-col span="4" text-align="center" class="option-item ">
							<view >
								<u-button type="primary" color="#366DE8" shape="circle" text="下一题" @click="nextQuestion"></u-button>
							</view>
						</u-col>
						<u-col span="1" text-align="center" class="option-item" >
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
		
		<view style="height: 100%;width:20px;"></view>

		<view style="width:320px;background-color: white;height: 100%;margin-bottom: 50px;border-radius: 10px;" >
			<view style="font-size: 16px;margin:13px 0 13px 0;width:320px;text-align: center;min-height:21px;">
				{{username}}</view>
			
			<u-line width="100%;" margin="15px 0 5px 0"></u-line>
			
			<view style="width: 100%; padding: 15px;">
				<u-row style="width: 100%;">
					<u-col span="8">
						<view style="display: flex;">
							<template v-if="isHistoryStatus">
								<view class="circle-small circle-right" style="margin-top: 5px;margin-right: 7px;">
								</view>
								<text style="margin-right: 13px;">正确</text>
								<view class="circle-small circle-wrong" style="margin-top: 5px;margin-right: 7px;">
								</view>
								<text style="margin-right: 13px;">错误</text>
							</template>
							<template v-if="!isHistoryStatus">
								<view class="circle-small circle-answer" style="margin-top: 5px;margin-right: 7px;"></view>
								<text style="margin-right: 13px;">已做</text>
							</template>
							<view class="circle-small" style="margin-top: 5px;margin-right: 7px;"></view>
							<text>未做</text>
						</view>
					</u-col>
				</u-row>
				<view style="margin:15px 0 5px 0"></view>
				<view :style="answerLibStyle" style="overflow: auto;">
					<template v-for="(groupItem, groupIndex) in currentQuestionGroupList" :key="groupIndex">
						<view class="color-black" style="padding-top:10px;padding-bottom:5px;">{{groupItem.name}}</view>
						<view style="display: grid;flex-flow: wrap;grid-template-columns: repeat(5, 1fr);align-items: center;">
							<view v-for="(item,index) in groupItem.list" :key="index">
								<view class="circle" :class="getAnswerSheetClass(item)" style="margin: 10px;"
									@click="changeSelectedIndex(item.indexValue)">
									<text style="font-weight: 300;">{{ item.indexValue + 1 }}</text>
								</view>
							</view>
						</view>
					</template>
				</view>

			</view>
			<view style="border-top: 1px solid #E2E3E7;padding:15px 30px 15px 30px" v-if="!isHistoryStatus">
				<u-button type="primary" color="#366DE8" shape="circle" text="提交试卷" @click="submit"></u-button>
			</view>
		</view>
		
		<u-modal :show="showConfirmDialog" :title="dialogTitile" :showCancelButton="showCancelBtn"
			:content='dialogContent' @confirm="dialogConfirmHandle" @cancel="dialogCancelHandle"></u-modal>
	</view>
	
</template>

<script>
	import practice from './practice.vue';
	import pageRoute from '../../utils/pageRoute'
	import {getUserInfo} from '../../api/pages/index.js'
	
	export default {
		extends: practice,
		data() {
			return {
				containerStyle: {},
				answerLibStyle: {},
				questionBottomStyle: {},
				needBack: true,
				username: '',
				courseName: ''
			}
		},
		
		mounted(){
			this.initSize();
			
      this.needLogin = this.urlParamObj.needLogin == 'false' ? false : true;
      this.isPC = true;
			
			let userInfo = uni.getStorageSync('user');
			if (userInfo) {
				let userObj = JSON.parse(userInfo);
				this.courseName = this.urlParamObj.examName ? this.urlParamObj.examName : userObj.courseName;
				this.username = userObj.name;
			}else if(this.needLogin){
				this.courseName = this.urlParamObj.examName;
				getUserInfo().then(this.getUser);
			}
			
			window.onresize = ()=>{
　　　　			this.initSize();
			}
		},
		
		methods: {
			initSize() {
				this.containerStyle.height = window.innerHeight + 'px';
				this.answerLibStyle.height = (window.innerHeight - 190 - 100)  + 'px';
				let percentWidth = window.innerWidth - 320 - 25;
				let maxWidth = 1200 - 320 - 25;
				let calcWidth = Math.min(percentWidth, maxWidth);
				this.questionBottomStyle.width = calcWidth + 'px';
			},
			getUser(res) {
				let user = res.data;
				this.username = user.name;
			}
		}
	}
</script>
<style src="../../customUI/practice.css"></style>

<style lang="scss">
	page {
		background-color: #EEF1F6;
	}
</style>